<template>
    <div class="change_pwd_sstep">
        <div class="header">
            <i @click='goBack' class="iconfont icon-xia"></i>重置登录密码
        </div>
        <div class="content">
            <div class="inp1 inp">
                <input v-model="pwd1" @click="sz('inp1')" ref='inp1' type="password" placeholder="设置登录密码（6-15位字母与数字组合）"><i @click="disp('i_f','inp1')" ref="i_f" class="iconfont icon-biyan"></i>
            </div>
            <div class="inp2 inp" style="margin-bottom: 0;">
                <input v-model="pwd2" @click="sz('inp2')" ref='inp2' type="password" placeholder="请再次输入登录密码"><i @click="disp('i_s','inp2')"  ref="i_s" class="iconfont icon-biyan"></i>
            </div>

            <div class="bt"><button class="confirm" style="outline: none" @click="qd">确定</button></div>
        </div>
    </div>
</template>

<script>
import '@/css/change_pwd_sstep.css';
import { Toast } from 'mint-ui';

export default {
  name: 'change_pwd_sstep',
  data() {
    return {
      pwd1: '',
      pwd2: '',
    };
  },
  methods: {
    goBack() {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/');
    },
    sz(_ref) {
      this.$refs.inp1.placeholder = '设置登录密码（6-15位字母与数字组合）';
      this.$refs.inp2.placeholder = '请再次输入登录密码';
      this.$refs[_ref].placeholder = '';
      this.$refs[_ref].style.color = '#000000';
      console.log(_ref);
    },
    disp(_ref, inp) {
      this.$refs[_ref].className = this.$refs[_ref].className === 'iconfont icon-biyan' ? 'iconfont icon-eyesopen' : 'iconfont icon-biyan';
      this.$refs[inp].type = this.$refs[_ref].className === 'iconfont icon-biyan' ? 'password' : 'text';
    },
    async qd() {
      const reg = /^[A-Za-z0-9]{6,15}$/;
      if (!(this.pwd1 === this.pwd2)) {
        Toast({
          message: '两次输入的密码不一致',
          duration: 1000,
        });
        return false;
      }
      if (!(reg.test(this.pwd1) && reg.test(this.pwd2))) {
        Toast({
          message: '密码格式不正确',
          duration: 1000,
        });
      }
      if (this.pwd1 === this.pwd2 && reg.test(this.pwd1) && reg.test(this.pwd2)) {
        const res = await this.$api.post('/user/set', {
          uid: this.$store.state.userinfo.uid,
          password: this.pwd1,
        });
        if (res.data.state) {
          Toast({
            message: res.data.info,
            duration: 1000,
          });
        }
        setTimeout(() => { this.$router.replace({ name: 'pwdLogin' }); }, 2000);
      }
    },
  },
};
</script>

<style scoped>

</style>
